<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header flex-sb">
          <span>{{ route.query.name ? route.query.name : "添加商品图片" }}</span>
          <div>
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleAddImage()">添加</el-button>
          </div>
        </div>
      </template>

      <div>
        <ImageUpload
          :limit="10"
          :max-file-size="10"
          :accept="'jpg,png,jpeg'"
          :goodsId="route.query.id"
          :storeId="route.query.storeId"
          :img-list="imgList"
          :upload-btn-text="'上传图片'"
          @upload-success="handleUploadSuccess"
        />
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import Vue, { reactive, ref, onMounted } from "vue";
import GoodsAPI from "@/api/system/goods.api";
import { useTagsViewStore } from "@/store";
import ImageUpload from "@/components/Upload/ImageUpload.vue";
const route = useRoute();
const router = useRouter();
const tagsViewStore = useTagsViewStore();

const imgList = ref([]);
async function initData() {
  const data = await GoodsAPI.detailInfo({ id: route.query.id });
  console.log(data);
  imgList.value =
    data.goodsImages && data.goodsImages.length > 0
      ? data.goodsImages.map((item, index) => {
          return {
            name: `图片${index + 1}`,
            url: item.imageUrl,
            status: "success",
            uid: getUid(),
          };
        })
      : [];
}

function handleUploadSuccess() {
  console.log("handleUploadSuccess");
  initData();
}
/** 获取一个不重复的id */
function getUid(): number {
  // 时间戳左移13位（相当于乘以8192） + 4位随机数
  return (Date.now() << 13) | Math.floor(Math.random() * 8192);
}
function handleUploadRemove() {}
function handleAddImage() {}

function handleClose() {
  tagsViewStore.closeCurrentView();
  router.push({ name: "GoodsIndex" });
}
onMounted(() => {
  initData();
});
</script>

<style lang="scss" scoped></style>
